<template>
    <div class="AddBuddy">
        <div class="AddBuddyHead">
            <button @click="Back" style="margin-right:10px">返回</button> <input type="text" placeholder="查询好友"
                v-model="inputText"><button @click="search">搜索</button>
        </div>
        <div class="AddBuddyBox">
            <div class="grid grid_cor3" v-if="BuddyRecommendList.length > 0">
                <div v-for="item in BuddyRecommendList" :key="item.userId"
                    @click="Buddypopup(item.userMailbox, item.userMailboxType)" class="AddBuddyBoxChildren">
                    <p>昵称：{{ item.userNickname }}</p>
                    <p>id：{{ item.userId }}</p>
                    <p>邮箱：<span v-html="item.userMailbox"></span></p>
                    <p>注册年龄：{{ item.userTime }}</p>
                    <div class="AddBuddyBoxChildrenFilex">
                        <span v-if="item.userMailboxType == '2' && inputText == ''">
                            推荐好友
                        </span>
                        <span v-if="item.userMailboxType == '2' && inputText != ''">
                            陌生人
                        </span>
                        <span v-if="item.userMailboxType == '3'">
                            好友验证中
                        </span>
                        <span v-if="item.userMailboxType == '1'">
                            好友
                        </span>
                        <span v-if="item.userMailboxType == '4'">
                            陌生人
                        </span>
                        <span v-if="item.userMailboxType == '5'">
                            拉黑中
                        </span>
                    </div>
                </div>
            </div>
            <div class="" v-else>
                <Zky_Error :title="'该平台所有用户都已经是您的好友,没用更多的好友推荐了'"></Zky_Error>
            </div>
        </div>
        <div>
            <Zky_Popup v-model:hidden="hidden" :title="'添加好友'" :Confirm="Confirm">
                <a-form :model="BuddyList" :rules="rules" ref="BuddyDom">
                    <a-form-item label="分组名称" name="buddyOneselfId" v-if="GroupList.length <= 0">
                        <a-input placeholder="请输入分组名" v-model:value="BuddyList.buddyOneselfId"></a-input>
                    </a-form-item>
                    <a-form-item label="分组" name="buddyGroup" v-else>
                        <a-select v-model:value="BuddyList.buddyGroup">
                            <a-select-option v-for="item in GroupList" :key="item.groupId" :value="item.groupId">{{
                                item.groupName }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-form>
            </Zky_Popup>
        </div>
    </div>
</template>

<script setup lang="ts">

import { ref, onMounted, watch } from "vue"
import Axios from "../../Axios/Axios";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { TimeLength } from "../../utils/Time"
import { main } from "../../store";
const Mains = main()
Mains.Home = 1
Mains.Buddy = 2
const router = useRouter()
const hidden = ref(false)
const BuddyDom = ref()
const GroupList = ref([{
    groupName: "",
    groupId: ""
}])
const inputText = ref("")
const BuddyRecommendList = ref([{
    userId: "",
    userNickname: "",
    userMailbox: "",
    userTime: "",
    userMailboxType: ""
}])
watch(() => inputText.value, () => {
    if (inputText.value == "") {
        init()
    }
})
const BuddyList = ref({
    buddyOthersId: "",
    buddyOneselfId: "",
    buddyGroup: "",
    userMailboxType: ""
})
const Back = () => {
    router.go(-1)
}
const rules = {
    buddyOneselfId: [{
        required: true, message: "请填写分组", trigger: "blur"
    },
    {
        min: 2, max: 6, message: "分组名长度再2-6之间", trigger: "blur"
    }, {
        pattern: /^[\u4e00-\u9fa5]{0,}$/, message: "分组名只是支持中文", trigger: "blur"
    }],
    buddyGroup: [{
        required: true, message: "请选择分组", trigger: "blur"
    }]
}
onMounted(() => {
    init()
})
// 搜索按钮
const search = async () => {
    if (inputText.value != "") {
        BuddyList.value = {
            buddyOthersId: "",
            buddyOneselfId: "",
            buddyGroup: "",
            userMailboxType: ""
        }
        BuddyList.value.userMailboxType = inputText.value
        const res = await Axios("UserBlurSelect", BuddyList.value)
        if (res.code == 200) {
            const pattern = new RegExp(inputText.value, "g")
            message.success(res.message)
            BuddyRecommendList.value = res.data
            if (BuddyRecommendList.value.length > 0) {
                BuddyRecommendList.value.forEach(el => {
                    el.userMailbox = el.userMailbox.replace(pattern, `<span style='color:red;font-size:2rem'>${inputText.value}</span>`)
                    el.userTime = <string>TimeLength(new Date(el.userTime))
                })
            }
            console.log(BuddyRecommendList.value);


        } else {
            message.warning(res.message)
        }
    } else {
        message.warning("请输入搜索内容之后搜索")
    }
}

// 初始化数据
const init = async () => {
    BuddyRecommendList.value = []
    const res = await Axios("BuddyRecommend")
    if (res.code == 200) {
        BuddyRecommendList.value = res.data
        if (BuddyRecommendList.value.length > 0) {
            BuddyRecommendList.value.forEach((el: any) => {
                el.userTime = <string>TimeLength(new Date(el.userTime))

            })
        }
    }
}
// 点击好友事件
const Buddypopup = (mailbox: string, type: string) => {
    switch (type) {
        case "1":
            message.success("对方已经是好友")
            break;
        case "2":
            BuddyList.value.buddyOthersId = mailbox;
            hidden.value = true
            groupList()
            break;
        case "3":
            message.success("等待对方同意")
            break;
        case "4":
            message.success("未知原因，可能被对方拉黑了")
            break;
        case "5":
            message.success("对方已被拉黑，无法添加好友")
            break;
    }
    // BuddyList.value.buddyOthersId = mailbox;
    // hidden.value = true
    // console.log(hidden.value);


}
// 添加好友确认事件
const Confirm = async () => {
    BuddyDom.value.validate().then(async () => {
        const res = await Axios("AddBuddy", BuddyList.value)
        if (res.code == 200) {
            message.success(res.message)
            init()
            hidden.value = false
            console.log(hidden.value);

        } else {
            message.warning(res.message)
        }
    })


}
// 查询当前分组
const groupList = async () => {
    const res = await Axios("GroupSelectMailbox")
    GroupList.value = []
    if (res.code == 200) {
        GroupList.value = res.data

    }

}



</script>

<style scoped lang="scss">
.AddBuddyHead {
    text-align: center;

    input {
        width: 50%;
        border: 1px solid #000;
        outline: none;
        height: 40px;
        border-radius: 20px;
        padding: 0 16px;
    }

    button {
        margin-left: 20px;
    }
}

.AddBuddyBox {
    margin-top: 30px;

    .AddBuddyBoxChildren {
        background: #fff;
        padding: 20px;
        box-shadow: 1px 1px 9px 1px rgba($color: #000000, $alpha: 0.6);
        cursor: pointer;
        position: relative;

        .AddBuddyBoxChildrenFilex {
            display: inline-block;
            position: absolute;
            right: 40px;
            top: 16px;
            writing-mode: vertical-rl;
            border: 1px solid #4983e1;
            border-radius: 8px;
            color: #4983e1;
            padding: 10px;
            letter-spacing: 2px;

        }
    }
}
</style>